@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/info_edit.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/suppliermy/store.css')}}">

@section('content')
<div class="mainHrContent" id="hrInfodetails">
    <div class="storelistTitle" id="storelistTitle"  v-cloak>
        <span class="storelistTitle_left">
            <span>

                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.suppliermy.supplierIndex') }}">供应商中心</a>
                > 店铺管理中心

            </span>
        </span>
        <!-- <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click="window.location.href ='{{ route('home.demand.demandAdd')}}'">免费发布需求</button>
        </span> -->
    </div>
    <div class="hrContent">
        @include('home.suppliermy.menu')
        <div class="basicInfo" id="hrInfodetailss"  v-cloak>
            <div class="basicInfo_title">
                <span></span>
                店铺管理中心 > @{{storeId==''?'添加':'修改'}}
            </div>
            <div class="userDetails">
                <p style="align-items: flex-start;">
                    <span class="details_title"><i class="must_input">* </i>LOGO：</span>
                    <el-upload class="avatar-uploader" name="image"
                               :action="uploadImgUrl"
                               :show-file-list="false"
                               :on-success="handleAvatarSuccessimg"
                               :before-upload="beforeAvatarUpload">
                        <img v-if="storeData.logo" :src="storeData.logo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </p>
                <p style="margin-left: 180px;margin-bottom:10px;color: rgba(209, 0, 24, 1);">建议尺寸(1:1)</p>
                <p>
                    <span class="details_title"><i class="must_input">* </i>公司名称：</span>
                    <el-input v-model="company_name" readonly></el-input>
                </p>
                <p>
                    <span class="details_title"><i class="must_input">* </i>公司地址：</span>
                    <el-input v-model="storeData.area_info"></el-input>
                </p>
                <p>
                    <span class="details_title"><i class="must_input">* </i>服务区域：</span>
                    <el-select v-model="storeData.service_area_id" multiple>
                        <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </p>
                <p>
                    <span class="details_title"><i class="must_input">* </i>擅长领域：</span>
                    <el-cascader v-model="storeData.cid" :options="cateData" :props="props" clearable></el-cascader>
                </p>

                <p>
                    <span class="details_title"><i class="must_input">* </i>服务时间：</span>
                    <!-- 选择时间 -->
                    <el-time-picker format="HH:mm:ss" value-format="HH:mm:ss" style="width:400px;padding:0px 10px;" size="mini" is-range v-model="storeData.workingtime" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
                    </el-time-picker>
                </p>
                <p style="align-items:end">
                    <span class="details_title"><i class="must_input">* </i>公司简介：</span>
                    <textarea placeholder="" v-model="storeData.description">
                    </textarea>
                </p>
                <p style="align-items:flex-start">
                    <span class="details_title"><i class="must_input">* </i>BANNER：</span>
                    <el-upload class="upload-demo" name="image"
                               :action="uploadImgUrl"
                               :on-remove="handleRemove1"
                               :on-error='handleErro'
                               :on-success="handleAvatarSuccess8"
                               list-type="picture"
                               {{--:file-list="storeData.banner">--}}
                               :file-list="img_arr">
                        <span class="addPicture" style="margin-top: 4px;">
                            <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                            添加图片
                        </span>
                    </el-upload>
                </p>
                <p style="margin-left: 180px;margin-bottom:10px;color: rgba(209, 0, 24, 1);">建议尺寸（1920:350）</p>
                <p style="align-items:flex-start">
                    <span class="details_title"><i class="must_input">* </i>图片展示：</span>
                    <el-upload class="upload-demo" name="image"
                               :action="uploadImgUrl"
                               :on-remove="handleRemove"
                               :on-error='handleErro'
                               :on-success="handleAvatarSuccess"
                               list-type="picture"
                               {{--:file-list="storeData.image">--}}
                               :file-list="img_arr1">
                        <span class="addPicture" style="margin-top: 4px;">
                            <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                            添加图片
                        </span>
                    </el-upload>
                </p>
                <p style="margin-left: 180px;margin-bottom:10px;color: rgba(209, 0, 24, 1);">可添加公司办公场地、团队风采、荣誉证书、作品等图片,&nbsp;建议尺寸（1120:440）</p>
                <p style="align-items:baseline">
                    <span class="details_title"><i class="must_input">* </i>服务内容：</span>
                    <span>
                        <el-tag :key="tag" v-for="tag in servicesData" closable :disable-transitions="false" @close="handleCloseServices(tag)">
                            @{{tag.title}}
                        </el-tag>
                        <span class="addDialog" @click="dialogVisible=true">
                            <img src="{{URL::asset('./img/icon/addDialog.png')}}">
                            添加服务内容
                        </span>
                    </span>
                </p>
                {{--<p style="margin-left: 180px;margin-bottom:10px;color: rgba(209, 0, 24, 1);">至少添加三项服务内容</p>--}}
                <p style="align-items:baseline">
                    <span class="details_title"><i class="must_input">* </i>案例展示：</span>
                    <span>
                        <el-tag :key="tag" v-for="(tag,index) in casesData" closable :disable-transitions="false" @close="handleCloseCeses(tag)">
                            @{{tag.title}}
                        </el-tag>
                        <span class="addDialog" @click="dialogVisible1=true">
                            <img src="{{URL::asset('./img/icon/addDialog.png')}}">
                            添加案例内容
                        </span>
                    </span>
                </p>
                <p style="align-items:flex-start">
                    <span class="details_title"><i class="must_input">* </i>合作伙伴：</span>
                    <el-upload class="upload-demo" name="image"
                               :action="uploadImgUrl"
                               :on-remove="handleRemove2"
                               :on-error='handleErro'
                               :on-success="handleAvatarSuccess2"
                               list-type="picture"
                               {{--:file-list="storeData.partners">--}}
                               :file-list="img_arr2">
                        <span class="addPicture" style="margin-top: 4px;">
                            <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                            添加图片
                        </span>
                    </el-upload>
                </p>
                <p style="margin-left: 180px;margin-bottom:10px;color: rgba(209, 0, 24, 1);">上传或作伙伴公司logo(建议尺寸(220:120))</p>
                <button @click="submitStore(1)" style="left:220px;display:inline-block;width:110px">预览</button>
                <button @click="submitStore(2)" style="left:300px;display:inline-block;">提交审核</button>
            </div>
            <el-dialog :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
                <div class="basicInfo_title">
                    <span></span>
                    添加服务内容
                    <a class="dialogFalse" @click="dialogVisible=false">×</a>
                </div>
                <div class="dialogMain">
                    <p>
                        <span class="details_title">服务标题：</span>
                        <el-input v-model="servicesForm.title"></el-input>
                    </p>
                    <p style="align-items:flex-start">
                        <span class="details_title">标题图片：</span>
                        <el-upload class="upload-demo" name="image"
                                   :action="uploadImgUrl"
                                   :on-success="handleAvatarSuccess4"
                                   :before-upload="beforeAvatarUpload"
                                   :show-file-list="false">
                            <img v-if="servicesForm.imageUrl" :src="servicesForm.imageUrl" class="avatar">
                            <span class="dialogUpload" v-else>
                                <span>
                                    <img src="{{URL::asset('./img/icon/dialogUpload.png')}}">
                                </span>
                                <span>文件需为：
                                    jpg/png格式</span>
                            </span>
                        </el-upload>
                    </p>
                    <p style="margin-left: 180px;margin-bottom:10px;color: rgba(209, 0, 24, 1);">建议尺寸（1:1）</p>
                    <p style="align-items:flex-start">
                        <span class="details_title">内容详情：</span>
                        <span class="feedback_addMain">
                            <el-upload class="upload-demo" name="image"
                                       :action="uploadImgUrl"
                                       :on-remove="handleRemove3"
                                       :on-error='handleErro'
                                       :on-success="handleAvatarSuccess3"
                                       list-type="picture"
                                       :file-list="servicesForm.contentImg">
                                <span class="addPicture" style="margin-bottom:20px;">
                                    <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                                    添加图片
                                </span>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
                            </el-upload>
                            <textarea v-model="servicesForm.content" placeholder="请具体描述">
                </textarea>
                        </span>
                    </p>
                    <button class="dialogButton" @click="serviceClick">确定</button>
                </div>
            </el-dialog>
            <el-dialog :visible.sync="dialogVisible1" width="800px" :before-close="handleClose">
                <div class="basicInfo_title">
                    <span></span>
                    添加案例
                    <a class="dialogFalse" @click="dialogVisible1=false">×</a>
                </div>
                <div class="dialogMain">
                    <p>
                        <span class="details_title">服务标题：</span>
                        <el-input v-model="casesForm.title"></el-input>
                    </p>
                    <p style="align-items:flex-start">
                        <span class="details_title">标题图片：</span>
                        <el-upload class="upload-demo" name="image"
                                   :action="uploadImgUrl"
                                   :on-success="handleAvatarSuccess5"
                                   :before-upload="beforeAvatarUpload"
                                   :show-file-list="false">
                            <img v-if="casesForm.imageUrl" :src="casesForm.imageUrl" class="avatar">
                            <span class="dialogUpload" v-else>
                                <span>
                                    <img src="{{URL::asset('./img/icon/dialogUpload.png')}}">
                                </span>
                                <span>文件需为：
                                    jpg/png格式</span>
                            </span>
                        </el-upload>
                    </p>
                    <p style="margin-left: 180px;margin-bottom:10px;color: rgba(209, 0, 24, 1);">建议尺寸（1:1）</p>
                    <p style="align-items:flex-start">
                        <span class="details_title">内容详情：</span>
                        <span class="feedback_addMain">
                            <el-upload class="upload-demo" name="image"
                                       :action="uploadImgUrl"
                                       :on-remove="handleRemove6"
                                       :on-error='handleErro'
                                       :on-success="handleAvatarSuccess6"
                                       list-type="picture"
                                       :file-list="casesForm.contentImg">
                                <span class="addPicture" style="margin-bottom:20px;font-size: 14px;">
                                    <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                                    添加图片
                                </span>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
                            </el-upload>
                            <textarea v-model="casesForm.content" placeholder="请具体描述">
                </textarea>
                        </span>
                    </p>
                    <button class="dialogButton" @click="casesClick">确定</button>
                </div>
            </el-dialog>
        </div>
    </div>

</div>
<style>

</style>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrInfodetails = new Vue({
            el: '#hrInfodetailss',
            data: () => {
                return {
                    storeId: getQueryString("id") || '',
                    areaData: [],
                    cateData: [],
                    banner:[],
                    company_name:'',
                    img_arr:[],
                    img_arr1:[],
                    img_arr2:[],
                    storeData: {
                        logo: "",
                        store_name: '',
                        area_info: '',
                        service_area: [],
                        cid: [],
                        workingtime: ['00:00:00'- '23:59:59'],
                        description: '',
                        image: [],
                        partners: [],
                        banner:[],
                        service_area_id:[]
                    },
                    servicesForm: {
                        title: "",
                        imageUrl: "",
                        content: '',
                        contentImg: [],
                    },
                    servicesData: [],
                    casesForm: {
                        title: "",
                        imageUrl: "",
                        content: '',
                        contentImg: [],
                    },
                    casesData: [],
                    props: {
                        multiple: true
                    },

                    imageUrl4: '',
                    imageUrl5: '',
                    uploadUrl: UPLOAD_FILE,
                    uploadImgUrl: UPLOAD_IMG,
                    dynamicTags: ['OA办公系统', 'IT服务外包', '档案管理系统'],
                    inputVisible: false,
                    dialogVisible: false,
                    dialogVisible1: false,
                    inputValue: '',
                    // fileList: [],
                    // fileList2: [],
                    fileList3: [],
                    fileList6: [],
                }
            },
            created() {
                this.getArea();
                this.getCates();
                if (getQueryString("id")) {
                    this.getStore();
                }
                this.company_name = JSON.parse(sessionStorage.getItem("HRuserDetails")).username
            },
            mounted() {},
            methods: {
                getArea() {
                    let data = {}
                    apiAjax("{{ route('home.public.areas')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.areaData = res.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                getStore() {
                    let data = {}
                    this.servicesData = [];
                    this.casesData = [];

                    apiAjax("{{ route('home.user.supplierStoreApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.storeData = res.data;
                            res.data.banner.map(item=>{
                                this.img_arr.push({url:item})
                            })
                            res.data.image.map(item=>{
                                this.img_arr1.push({url:item})
                            })
                            res.data.partners.map(item=>{
                                this.img_arr2.push({url:item})
                            })
                            // this.storeData.banner = res.data.banner || [];
                            // this.storeData.image =res.data.image||[];
                            // this.storeData.partners = res.data.partners||[];
                                this.storeData.services.forEach(element => {
                                    this.servicesData.push({
                                        title: element.title,
                                        imageUrl: element.thumb,
                                        contentImg:element.images,
                                        content: element.content
                                    })
                                });
                                this.storeData.cases.forEach(element => {
                                    this.casesData.push({
                                        title: element.title,
                                        imageUrl: element.thumb,
                                        contentImg:element.images,
                                        content: element.content
                                    })
                                });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                getCates() {
                    let data = {
                        type: 4
                    }
                    apiAjax("{{ route('home.public.category')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.cateData = res.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                submitStore(type) {
                    // let imgs=[];
                    // let partners=[];
                    // let banner = [];
                    // this.storeData.image.forEach(element => {
                    //     if(element.url){
                    //         imgs.push(element.url)
                    //     }else{
                    //         imgs.push(element)
                    //     }
                    // });
                    // this.storeData.partners.forEach(element => {
                    //     if(element.url){
                    //         partners.push(element.url)
                    //     }else{
                    //         partners.push(element)
                    //     }
                    // });
                    // this.storeData.banner.forEach(element => {
                    //     if(element.url){
                    //         banner.push(element.url)
                    //     }else{
                    //         banner.push(element)
                    //     }
                    // });
                    if(!this.storeData.logo) return this.$message({
                        message: '请上传LOGO',
                        type: 'warning'
                    });
                    if(!this.storeData.area_info) return this.$message({
                        message: '请输入公司地址',
                        type: 'warning'
                    });
                    if(!this.storeData.service_area_id) return this.$message({
                        message: '请选择服务区域',
                        type: 'warning'
                    });
                    if(!this.storeData.cid) return this.$message({
                        message: '请选择擅长领域',
                        type: 'warning'
                    });
                    if(!this.storeData.description) return this.$message({
                        message: '请输入公司简介',
                        type: 'warning'
                    });
                    if(!this.storeData.banner.length) return this.$message({
                        message: '请上传banner图片',
                        type: 'warning'
                    });
                    // !imgs.length
                    if(!this.storeData.image) return this.$message({
                        message: '请上传图片展示',
                        type: 'warning'
                    });
                    // if(!this.servicesData.length){
                    //     this.$message({
                    //         message: '请上传服务内容',
                    //         type: 'warning'
                    //     });
                    //     return false;
                    // }else if (this.servicesData.length <3){
                    //     this.$message({
                    //             message: '至少添加三项服务内容',
                    //             type: 'warning'
                    //         });
                    //         return false;
                    // }
                    if(!this.casesData.length) return this.$message({
                        message: '请上传案例展示',
                        type: 'warning'
                    });
                    // !partners.length
                    if(!this.storeData.partners.length) return this.$message({
                        message: '请上传合作伙伴',
                        type: 'warning'
                    });
                    let data = {
                        // store_id:getQueryString("id"),
                        logo: this.storeData.logo,
                        cid: JSON.stringify(this.storeData.cid),
                        store_name: this.company_name,
                        area_info: this.storeData.area_info,
                        workingtime: this.storeData.workingtime.join('-'),
                        service_area: this.storeData.service_area_id.join(),
                        description: this.storeData.description,
                        // image: imgs.join(),
                        // partners: partners.join(),
                        // banner:banner.join(),
                        image: this.storeData.image,
                        banner:this.storeData.banner,
                        partners: this.storeData.partners,
                        case: JSON.stringify(this.casesData),
                        service: JSON.stringify(this.servicesData),
                        post_type:type
                    };
                    const loading = this.$loading({
                        lock: false,
                        text: '加载中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255, 255, 255, 0.1)'
                    });
                    // if(type == 1) {
                        apiAjax("{{ route('home.user.supplierStoreUpdateApi')}}", 'post', data, (res) => {
                        loading.close();
                            console.log(res)
                        if (res.code == 0) {
                            if(type == 1) {
                                window.location.replace(`{{ route('home.store.storeprev') }}?id=${res.data}&type=2`)
                            }else {
                                console.log(2)
                                this.$message({
                                    message: res.msg,
                                    type: 'success'
                                });
                                window.location.href = "{{ route('home.suppliermy.supplierStore') }}";
                            }
                        } else {
                            console.log(3)
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                        }, (erro) => {
                            loading.close();
                        });
                },
                serviceClick() {
                    this.servicesData.push(this.servicesForm);
                    this.dialogVisible = false;
                    this.servicesForm = {
                        title: "",
                        imageUrl: "",
                        content: '',
                        contentImg: [],
                    };
                },
                handleCloseServices(item) {
                    this.servicesData.forEach((element, index) => {
                        if (element.title == item.title) {
                            this.servicesData.splice(index, 1)
                        }
                    });
                },
                casesClick() {
                    this.casesData.push(this.casesForm);
                    this.dialogVisible1 = false;
                    this.casesForm = {
                        title: "",
                        imageUrl: "",
                        content: '',
                        contentImg: [],
                    };
                },
                handleCloseCeses(item) {
                    this.casesData.forEach((element, index) => {
                        if (element.title == item.title) {
                            this.casesData.splice(index, 1)
                        }
                    });
                },


                // 文件上传
                handleAvatarSuccessimg(res, file) {
                    this.storeData.logo = file.response.data.path;
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type == 'image/jpeg' || file.type == 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG/png 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                handleClose() {
                    this.dialogVisible = false;
                    this.dialogVisible1 = false;
                },
                handleErro() {
                    this.$message.error('上传失败');
                },
                handleAvatarSuccess(res, file) {
                    this.storeData.image.push(res.data.path)
                },
                handleRemove(file, fileList) {
                    // this.storeData.image = [];
                    // this.storeData.image = fileList;
                    // fileList.forEach(element => {
                    //     this.storeData.image.push(element.response.data.path)
                    // });
                    this.storeData.image.indexOf(file.url) !=-1? this.storeData.image.splice(this.storeData.image.indexOf(file.url),1) : '';
                },

                handleAvatarSuccess8(res, file) {
                    this.storeData.banner.push(res.data.path)
                },
                handleRemove1(file, fileList) {
                    // this.storeData.banner = [];
                    // this.storeData.banner = fileList;
                    // fileList.forEach(element => {
                    //     this.storeData.banner.push(element.response.data.path)
                    // });
                    this.storeData.banner.indexOf(file.url) !=-1? this.storeData.banner.splice(this.storeData.banner.indexOf(file.url),1) : '';
                },
                handleAvatarSuccess2(res, file) {
                    this.storeData.partners.push(res.data.path)
                },
                handleRemove2(file, fileList) {
                    // this.storeData.partners = [];
                    // this.storeData.partners = fileList;
                    // fileList.forEach(element => {
                    //     this.storeData.partners.push(element.response.data.path)
                    // });
                    this.storeData.partners.indexOf(file.url) !=-1? this.storeData.partners.splice(this.storeData.partners.indexOf(file.url),1) : '';
                },

                handleAvatarSuccess3(res, file) {
                    this.servicesForm.contentImg.push(res.data.path)
                },
                handleRemove3(file, fileList) {
                    this.servicesForm.contentImg = [];
                    fileList.forEach(element => {
                        this.servicesForm.contentImg.push(element.response.data.path)
                    });
                },
                handleAvatarSuccess6(res, file) {
                    this.casesForm.contentImg.push(res.data.path)
                },
                handleRemove6(file, fileList) {
                    this.casesForm.contentImg = [];
                    fileList.forEach(element => {
                        this.casesForm.contentImg.push(element.response.data.path)
                    });
                },

                handleAvatarSuccess4(res, file) {
                    this.servicesForm.imageUrl = file.response.data.path;
                },
                handleAvatarSuccess5(res, file) {
                    this.casesForm.imageUrl = file.response.data.path;
                },
            }
        })
    })
</script>
@endsection